<script setup>
import {onMounted} from 'vue'
import {list, getList, totalPrice, delList, addList, formData} from './smallBackTools'

onMounted(()=>{
  getList()
})
//    import axios from 'axios'
//    import { ref,computed } from 'vue'

//   //  1.0 创建一个响应式数据
//   const list = ref([])
//   //  2.0 创建一个方法获取数据
//   const getList = async () => {
//   const res = await axios({ url: 'https://applet-base-api-t.itheima.net/bill?creator=ivan520' })
//   console.log('66',res.data.data);
//   list.value = res.data.data
// }

//    getList()

//   //  定义计算属性统计数据
//    const totalPrice = computed(()=>{
//     let total = 0
//      list.value.forEach(item=>{
//       total+=item.price
//      })
//      return total
//    })

//    //  定义一个方法删除数据
//    const delList = async (id)=>{
//    await  axios({
//       url: `https://applet-base-api-t.itheima.net/bill/${id}`,
//       method: 'DELETE'
//      })
//     //  删除后重新获取数据
//      getList()
//    }


//    //  定义一个方法添加数据
//    const formData = ref({
//     creator:'ivan520',
//     name:'',
//     price:0
// })
//    const addList = async ()=>{
//     await axios({
//       url: 'https://applet-base-api-t.itheima.net/bill',
//       method: 'POST',
//       data:formData.value
//     })
//     //  添加后重新获取数据
//     getList()
//     //  清空表单
//     formData.value.name = ''
//     formData.value.price = 0
//    }

</script>

<template>
  <div id="app">
    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">

        <!-- 添加资产 -->
        <form class="my-form" @submit.prevent>
          <input 
            type="text" 
            class="form-control" 
            placeholder="消费名称" 
            v-model="formData.name"
          />
          <input 
            type="number" 
            class="form-control" 
            placeholder="消费价格" 
            v-model.number="formData.price"
          />
          <button 
            type="button" 
            class="btn btn-primary" 
            @click="addList"
          >添加账单</button>
        </form>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>
              <th>消费名称</th>
              <th>消费价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="item.id">
              <td>{{ index+1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.price }}</td>
              <td><a href="javascript:;" @click="delList(item.id)">删除</a></td>
            </tr>
            <!-- <tr>
              <td>2</td>
              <td>大衣</td>
              <td class="red">199.00</td>
              <td><a href="javascript:;">删除</a></td>
            </tr> -->
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计：{{ totalPrice }}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- 右侧图表 -->
      <!-- <div class="echarts-box" id="main"></div> -->
    </div>
  </div>
</template>

<style scoped>
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css);

.red {
  color: red !important;
}

.search {
  width: 300px;
  margin: 20px 0;
}

.my-form {
  display: flex;
  margin: 20px 0;
}

.my-form input {
  flex: 1;
  margin-right: 20px;
}

.table> :not(:first-child) {
  border-top: none;
}

.contain {
  display: flex;
  padding: 10px;
}

.list-box {
  flex: 1;
  padding: 0 30px;
}

.list-box a {
  text-decoration: none;
}

.echarts-box {
  width: 600px;
  height: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

tfoot {
  font-weight: bold;
}

@media screen and (max-width: 1000px) {
  .contain {
    flex-wrap: wrap;
  }

  .list-box {
    width: 100%;
  }

  .echarts-box {
    margin-top: 30px;
  }
}
</style>